<template>
    <div id="homeworkList" :style="style">
        <!--@scroll="scrolling" todo 可能会有的滚动自动加载更多-->
        <div class="title">
            <h1>作业</h1>
        </div>
        <ul class="list">
            <li is="item" v-for="el in list" :info="el" :link="'homeworkDetail'"></li>
        </ul>
    </div>
</template>

<script type="text/babel">

    let VueComponent_Item = require('../../component/item/homeworkItem.vue');
    var Status_tab = require('../../component/sideNav/tabStatus');
    let message = require('../../component/message/message.es6');

    module.exports = {
        props: ['width', 'bannerShow', 'tab'],
        data: ()=>({
            list: []
        }),
        computed: {
            style: function () {
                return {
                    'width': (this.width * 0.7) + 'px',
                    'left': (this.width * 0.3) + 'px'
                }
            }
        },
        methods: {},
        components: {
            item: VueComponent_Item
        },
        created: function () {
            this.tab = Status_tab.homework;
            this.bannerShow = true;
            this.$http({url: '/api/homework/list', method: 'GET'})
                    .then((res)=> {
                        // success callback
                        this.list = res.data.list.sort((a, b)=> {
                            return a.overtime < b.overtime;
                        });
                    }, function (response) {
                        // error callback
                    });
        }
    }
</script>